<template>
  <div class='list'>
    <ul>
      <li v-for="(item, index) in formatListData" :key="index">
        <img :src="item.wx_pic||item.photo||defaultImage" alt="">
        <div class="content">
          <p class="title"><span class="ft16">{{item.name}}</span>({{item.number}} {{item.class}}) <span class="fr ft14">总分：{{item.count}}</span></p>
          <p class="score">
            <span>考勤:{{item.attendance}}</span>
            <span>成绩:{{item.score}}</span>
            <span>奖励:{{item.award}}</span>
            <span>惩处:{{item.punish}}</span>
          </p>
        </div>
      </li>
    </ul>
    <p class="no-data" v-show="listData.length==0">暂时没有数据哦~</p>
  </div>
</template>
<script>
export default {
  props:['listData','routerDetail'],
  components: {},
  name: "",
  data() {
    return {
      defaultImage:require('../../../../../assets/images/home/default.jpg')
    };
  },
  computed:{
    formatListData(){
      return this.listData||[]
    }
  },
  methods: {},
  created() {}
};
</script>
<style lang="scss" scoped>
.list {
  li{
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;

    img{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin-right: 10px;
    }
    >div{
      flex: 1;

      p{
        font-size: 12px;
        color: #666;
      }
      
      .score{
        width: 80%;
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        margin-top: 10px;
      }

      .ft16{
        font-size: 16px;
        color: #333;
      }
      .ft14{
        font-size: 14px;
        color: #333;
      }
    }
  }
  li:nth-of-type(1){
    border-top: 1px solid #ccc;
  }
}
</style>